<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<script src="../js/header.js"></script>
		<style>
			.title_name{
				font-family: SourceHanSansCN-Medium;
				font-size: 22px;
				color: #323232;
			}
			ul,li{
				list-style-type: disc;
				list-style-position: inside;
			}
			.content_ul li{
				padding: 22px 0 22px 22px;
				border-top: 1px solid #EBEBEB;
				/*cursor: pointer;*/
			}
			.content_ul li:first-child{
				border-top: 0;
			}
			.content_ul li:hover{
				background: #3389D4;
				color: #fff;
			}
			.content_ul li:after{
				content: '';
				width: 0;
				height: 0;
				clear: both;
			}
			.content_ul li span{
				white-space: nowrap;
				overflow: hidden;
				-ms-text-overflow: ellipsis;
				text-overflow: ellipsis;
			}
			.more_more{
				font-family: SourceHanSansCN-Regular;
				font-size: 17px;
				color: #696969;
				cursor: pointer;
			}
			.more_more:hover{
				color: #3389D4;
			}

            .quick_access{
                margin-top: 30px;
				margin-bottom: 20px;
            }
            .quick_access:after{
                content: '';
                width: 0;
                height: 0;
                clear: both;
            }
            .quick_access div{
                float: left;
                margin-left: 33px;
                margin-bottom: 10px;
                cursor: pointer;
            }
		</style>
	</head>
	<body>
		<div v-cloak id="app_index">
			<el-row>
				<el-col class="quick_access">
					<div v-for="(item,index) in fastlist" v-show="item.show" @mouseenter="changeImg(item,index)" @mouseleave="recovery(item,index)">
                        <a href="#" @click="addTab(item)">
						    <img :src="item.img" />
                        </a>
					</div>
				</el-col>
			</el-row>
			<el-row v-show="showDbLists" style="margin-bottom: 30px;">
				<!-- 待办 -->
				<el-col :span="11" style="margin-left: 36px;margin-right: 5px;background: #FFFFFF;border: 1px solid #D6D7DC;box-shadow: 0 2px 7px 0 rgba(213,221,237,0.50);">
					<el-row style="padding: 0px 11px 0px 21px;height: 72px;border-bottom: 1px solid #EBEBEB;">
						<el-col :span="6" style="margin-top: 19px;">
							<img src="../images/daiban.png" style="display: inline-block;position: relative;top: 6px;"/>
							<span class="title_name" style="display: inline-block;margin-left: 12px;">待办工作</span>
						</el-col>
						<el-col :span="2" style="float: right;margin-top: 25px;">
							<span class="more_more" @click="addTab(dbBtn)">更多></span>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<ul class="content_ul" v-if="contentRequire.length != 0">
								<li v-for="list in contentRequire" >
									<span>{{ list.title }}</span>
									<div style="float: right;padding-right: 22px;">{{ list.createTime }}</div>
								</li>
							</ul>
							<ul class="content_ul" v-else>
									<li  style="list-style: none;text-align: center;">
										<span style="font-size: 20px; list-style: none;">暂无数据</span>
									</li>
							</ul>

						</el-col>
					</el-row>

				</el-col>
				<!-- 已办 -->
				<el-col :span="11" style="margin-right: 10px;margin-left: 44px;background: #FFFFFF;border: 1px solid #D6D7DC;box-shadow: 0 2px 7px 0 rgba(213,221,237,0.50);">
					<el-row style="padding: 0px 11px 0px 21px;height: 72px;border-bottom: 1px solid #EBEBEB;">
						<el-col :span="6" style="margin-top: 19px;">
							<img src="../images/yiban.png" style="display: inline-block;position: relative;top: 4px;"/>
							<span class="title_name" style="display: inline-block;margin-left: 12px;">已办工作</span>
						</el-col>
						<el-col :span="2" style="float: right;margin-top: 25px;">
							<span class="more_more" @click="addTab(ybBtn)">更多></span>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<ul class="content_ul" v-if="contentFinished.length != 0">
								<li v-for="list in contentFinished">
									<span>{{ list.title }}</span>
									<div style="float: right;padding-right: 22px;">{{ list.createTime }}</div>
								</li>
							</ul>
							<ul class="content_ul" v-else>
								<li  style="list-style: none;text-align: center;" >
									<span style="font-size: 20px; ">暂无数据</span>
								</li>
							</ul>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</div>
	</body>
	<script>
		var sy = new Vue({
			el: '#app_index',
			data(){
			    return {
                    showDbLists: false,
					fastlist: [
						{
						    id: '',
						    text: '建设单位注册',
                            url: '',
                            img: '../images/sy/建设单位注册.png',
							show: false
						},
						{
						    id: '',
                            text: '安评单位注册',
                            url: '',
                            img: '../images/sy/安评单位注册.png',
							show: false
						},
						{
						    id: '',
                            text: '地震小区划工作成果监管',
                            url: '',
                            img: '../images/sy/小区划成果监管.png',
							show: false
						},
						{
                            id: '',
                            text: '安评单位监管',
                            url: '',
                            img: '../images/sy/安评单位监管.png',
							show: false
						},
						{
                            id: '',
                            text: '区域地震安全性评估成果监管',
                            url: '',
                            img: '../images/sy/区域成果监管.png',
							show: false
						},
						{
                            id: '',
                            text: '全覆盖监管',
                            url: '',
                            img: '../images/sy/安评工作全监管.png',
							show: false
						},
						{
                            id: '',
                            text: '随机监管',
                            url: '',
                            img: '../images/sy/安评工作随机监管.png',
							show: false
						},
						{
                            id: '',
                            text: '区域地震安全性评估成果',
                            url: '',
                            img: '../images/sy/区域评估结果.png',
							show: false
						},
						{
                            id: '',
                            text: '地震小区划工作成果',
                            url: '',
                            img: '../images/sy/小区划成果.png',
							show: false
						},
						{
                            id: '',
                            text: '安评工作成果备案',
                            url: '',
                            img: '../images/sy/安评工作备案.png',
							show: false
						}
					],
                    contentRequire: [],
                    contentFinished: [],
                    dbBtn: {
                        id: '',
                        text: '待办',
                        url: ''
                    },
                    ybBtn: {
                        id: '',
                        text: '已办',
                        url: ''
                    }
				}
			},
			mounted() {
                //this.showFastBtn();
                //this.getData();
			},
			methods:{
			    showFastBtn(){
                    var menulist = JSON.parse(localStorage.getItem("menuList"));
                    var fastlist = this.fastlist;
                    // 遍历--匹配
                    for (var i=0; i<fastlist.length; i++) {
                        var ftxt = fastlist[i].text;
                        for (var j=0; j<menulist.length; j++) {
                            if (ftxt == menulist[j].text) {
                                fastlist[i].show = true;
                                fastlist[i].id = menulist[j].id; // 添加id
                                fastlist[i].url = menulist[j].url; // 添加url
                                break;
                            }
                        }
                    }

                    var dbBtn = this.dbBtn;
                    var ybBtn = this.ybBtn;
                    // 判断待办、已办
                    for (var j=0; j<menulist.length; j++) {
                        if ('待办' == menulist[j].text) {
                            this.showDbLists = true;
                            dbBtn.id = menulist[j].id; // 添加id
                            dbBtn.url = menulist[j].url; // 添加url
                            continue;
                        }
                        if ('已办' == menulist[j].text) {
                            this.showDbLists = true;
                            ybBtn.id = menulist[j].id; // 添加id
                            ybBtn.url = menulist[j].url; // 添加url
                            continue;
                        }
                    }
				},
                getData(){
                    axios({
                        method: 'get',
                        url: '/dzjap/todo/firstPageInfo'
                    })
                    .then(response => {
                        let listdata = response.data;
                        if (listdata.code == 200) {
                            debugger;
                            this.contentFinished = listdata.data.finish.results;
                            this.contentRequire = listdata.data.todo.results;

                        } else {
                            this.$message.error(listdata.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
				},
                addTab(item){
                    parent.vue.addTab(item);
                },
				// hover图片
                changeImg(item,index){
                    if(index == 0){
						item.img = '../images/sy/hover/建设单位注册.png';
                    }else if(index == 1){
                        item.img = '../images/sy/hover/安评单位注册.png';
                    }else if(index == 2){
                        item.img = '../images/sy/hover/小区划成果监管.png';
                    }else if(index == 3){
                        item.img = '../images/sy/hover/安评单位监管.png';
                    }else if(index == 4){
                        item.img = '../images/sy/hover/区域成果监管.png';
                    }else if(index == 5){
                        item.img = '../images/sy/hover/安评工作全监管.png';
                    }else if(index == 6){
                        item.img = '../images/sy/hover/安评工作随机监管.png';
                    }else if(index == 7){
                        item.img = '../images/sy/hover/区域评估结果.png';
                    }else if(index == 8){
                        item.img = '../images/sy/hover/小区划成果.png';
                    }else if(index == 9){
                        item.img = '../images/sy/hover/安评工作备案.png';
                    }
				},
                recovery(item,index){
                    if(index == 0){
                        item.img = '../images/sy/建设单位注册.png';
                    }else if(index == 1){
                        item.img = '../images/sy/安评单位注册.png';
                    }else if(index == 2){
                        item.img = '../images/sy/小区划成果监管.png';
                    }else if(index == 3){
                        item.img = '../images/sy/安评单位监管.png';
                    }else if(index == 4){
                        item.img = '../images/sy/区域成果监管.png';
                    }else if(index == 5){
                        item.img = '../images/sy/安评工作全监管.png';
                    }else if(index == 6){
                        item.img = '../images/sy/安评工作随机监管.png';
                    }else if(index == 7){
                        item.img = '../images/sy/区域评估结果.png';
                    }else if(index == 8){
                        item.img = '../images/sy/小区划成果.png';
                    }else if(index == 9){
                        item.img = '../images/sy/安评工作备案.png';
                    }
				}
			}
		})
	</script>
</html>
